<template>
    <el-row justify="center" style="margin-top: 50px">
        <el-col :span="12">
            <el-descriptions title="教师档案导出" column="1" border size="large">
                <el-descriptions-item label="教师个人基本信息">
                    <el-tag size="large" type="success" v-if="model_1_status">已录入</el-tag>
                    <el-tag size="large" type="danger" v-else>未录入</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="基础教学工作">
                    <el-tag size="large" type="success" v-if="model_2_status">已录入</el-tag>
                    <el-tag size="large" type="danger" v-else>未录入</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="专业和课程建设成果">
                    <el-tag size="large" type="success" v-if="model_3_status">已录入</el-tag>
                    <el-tag size="large" type="danger" v-else>未录入</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="科研大赛与一体化课改" width="100">
                    <el-tag size="large" type="success" v-if="model_4_status">已录入</el-tag>
                    <el-tag size="large" type="danger" v-else>未录入</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="企业实践锻炼">
                    <el-tag size="large" type="success" v-if="model_5_status">已录入</el-tag>
                    <el-tag size="large" type="danger" v-else>未录入</el-tag>
                </el-descriptions-item>
            </el-descriptions>
        </el-col>
    </el-row>
    <el-row justify="center" style="margin-top: 30px">
        <el-button @click="submit" type="primary" size="large">导出</el-button>
    </el-row>
</template>

<script>
import {ElLoading, ElMessage} from "element-plus";
import useStore from "../../store/store";

const store = useStore()
export default {
    name: "export",
    data() {
        return {
            model_1_status: false,
            model_2_status: false,
            model_3_status: false,
            model_4_status: false,
            model_5_status: false,
        }
    },
    methods: {
        submit() {
            if (!this.model_1_status || !this.model_2_status || !this.model_3_status || !this.model_4_status || !this.model_5_status) {
                let message = '';
                if (!this.model_1_status) message += '教师个人基本信息，'
                if (!this.model_2_status) message += '基础教学工作，'
                if (!this.model_3_status) message += '专业和课程建设成果，'
                if (!this.model_4_status) message += '科研大赛与一体化课改，'
                if (!this.model_5_status) message += '企业实践锻炼，'
                ElMessage.warning(`${message}尚未录入！`)
            } else {
                this.$api.pushArchiveExportData(store.user_id).then(
                    response => {
                        /*
                        * 此接口会返回json和Blob两种类型格式，需做兼容处理
                        * */
                        const reader = new FileReader();
                        reader.readAsText(response.data);
                        reader.onload = event => {
                            try {
                                // 将读取的string转换为json
                                // 若果能转换成功 => 接口返回的是json数据，提示报错信息
                                const json = JSON.parse(event.target.result);
                                if (json) {
                                    ElMessage.error('失败！')
                                }
                            } catch (err) {
                                ElMessage.success('成功！稍后会自动下载')
                                // 不能被转换成json => 接口返回的是blob, 下载blob文件
                                const fileName = response.headers['content-disposition'].split('filename=')[1]
                                this.downloads(response.data, fileName, response.headers['content-type'])
                            }
                        };
                        // if (response.data?.isSaved === false || true) {
                        //     ElMessage.success('成功！')
                        //     let fileName = response.headers['content-disposition'].split('filename=')[1]
                        //     this.downloads(response.data, fileName, response.headers['content-type'])
                        // } else {
                        //     ElMessage.error('失败！')
                        // }
                    },
                    error => {
                        console.log(error)
                        ElMessage.error(error.message)
                    }
                )
            }
        },
        downloads(fileStream, fileName, fileType) {
            const blob = new Blob([fileStream], {type: fileType})
            const a_link = document.createElement('a')
            const URL = window.URL || window.webkitURL
            const fileHref = URL.createObjectURL(blob)
            a_link.href = fileHref
            a_link.download = fileName
            document.body.appendChild(a_link)
            a_link.click()
            document.body.removeChild(a_link)
            window.URL.revokeObjectURL(fileHref)
        }
    },
    mounted() {

    },
    activated() {
        const loading = ElLoading.service({
            target: document.querySelector('.el-main'),
            text: '请稍候...'
        })
        this.$api.pullArchiveExportData(store.user_id).then(
            response => {
                for (const datum of response.data) {
                    switch (datum.item_id) {
                        case 0:
                            this.model_1_status = datum.is_filled
                            break;
                        case 1:
                            this.model_2_status = datum.is_filled
                            break;
                        case 2:
                            this.model_3_status = datum.is_filled
                            break;
                        case 3:
                            this.model_4_status = datum.is_filled
                            break;
                        case 4:
                            this.model_5_status = datum.is_filled
                            break;
                    }
                }
                loading.close()
            },
            error => {
                console.log(error)
                ElMessage({
                    type: "error",
                    message: `${error.message}----请求数据失败，请刷新重试`
                })
                loading.close()
            }
        )
    }
}
</script>

<style scoped>

</style>